<template>
  <div>
    <div class="spin-right"></div>
    <div class="spin-right-top">
      <div class="login-out">{{ username }}</div>
    </div>
    <div class="LeftNav">
      <div class="left-title">
        {{ title }}
      </div>
      <div class="left-list">
        <el-col :span="24">
          <el-menu
            unique-opened
            :default-active="$route.path"
            router
            class="el-menu-vertical-demo"
            background-color="#0066ff"
            text-color="#dddddd"
            active-text-color="#ffffff"
          >
            <template v-for="(item, index) in mean">
              <el-menu-item :key="index" :index="item.path">
                <i :class="item.class"></i>
                <span style="font-size:20px" slot="title">{{
                  item.title
                }}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-col>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "LeftNav",
  data() {
    return {
      title: "数据报表系统",
      mean: [
        { title: "导航报表", path: "/report", class: "el-icon-s-home" },
        { title: "业务报表", path: "/calldInfo", class: "el-icon-menu" }
      ],
      username: ""
    };
  },
  watch: {
    $route(to) {
      var path = "/" + to.path.substring(1);
    }
  },
  mounted() {
    this.username = localStorage.getItem("UserName");
  },
  methods: {
    logout() {
      this.$confirm("是否退出系统?", "提示", {
        customClass: "message-logout",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var storage = window.localStorage;
          storage.clear();
          this.$router.push("/login");
        })
        .catch(() => {});
    }
  }
};
</script>
<style>
.spin-right {
  position: absolute;
  left: 230px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  padding: 0px 20px 20px 20px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-overflow: ellipsis;
}
.spin-right-top {
  height: 60px;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  padding-right: 20px;
}
.login-out {
  font-size: 16px;
  height: 60px;
  line-height: 60px;
  float: right;
  font-family: Microsoft YaHei, serif;
}
.LeftNav {
  width: 230px;
  height: 100%;
  position: absolute;
  background: #0066ff;
  font-family: Microsoft YaHei, serif;
  z-index: 10;
}
.left-title {
  height: 60px;
  width: 100%;
  text-align: center;
  line-height: 60px;
  font-size: 25px;
  color: #ffffff;
}
.left-list {
  width: 100%;
  text-align: left;
}
.left-list ul {
  border-right: solid 1px #0066ff;
}
.message-logout {
  vertical-align: super;
}
</style>
